<template>
	<view>
		<view class="row head_wrap" v-if="withdrawMethodId>0" @click="goToSelectBank">
			<image :src="bankIcon" mode="aspectFill"></image>
			<view class="bank_wrap">
				<span class="name">{{bankName}}</span>
				<span class="bank_num">尾号{{bankCardNo}}储蓄卡</span>
			</view>
			<span class="flex_one"></span>
			<span class="arraw"></span>
		</view>
		
		<view class="row head_wrap" @click="goToAddBank" v-else>
			<span class="add_bank">添加银行卡</span>
			<span class="flex_one"></span>
			<span class="arraw"></span>
		</view>
		
		<view class="content_wrap">
			<view class="title">提现金额</view>
			<view class="content_money row">
				<image src="../../static/img/qian_blank_icon.png" mode="aspectFill"></image>
				<input type="number" @input = "inputChange" v-model="money" maxlength="8"/>
				
			</view>
			<view class="row_between info_wrap">
				<span class="info">可用余额{{balanceMoney}}元</span>
				<span class="btn" @click="getAllMoney">全部提现</span>
			</view>
		</view>
		
		<view class="row tixian_btn" @click="tixianAction">
			<span class="flex_one" :class="{'active': (parseFloat(money)>=parseFloat(minLimit) && bankParams && parseFloat(money)<=parseFloat(maxLimit))}">1~3个工作日到账，确认提现</span>
		</view>
		
		<view class="bottom">
			<view class="bottom_info">提现规则：</view>
			
			<!-- <view class="bottom_one row" style="margin-top: 30upx;">
				<span class="one">1</span> 
				<span>单笔满100元可提现，免提现手续费</span>
			</view>
			<view class="bottom_one row">
				<span class="one">2</span> 
				<span>单笔提现上限1000元，单日累计不限</span>
			</view> -->
			
			<rich-text :nodes="desc" style="color: #666666; font-size: 26upx;"></rich-text>
		</view>
		
		
		
		<div class="modal-mask row_center" v-if="isShowPwd" @touchmove.stop.prevent="moveHandle">
			<div class="modal-dialog" style="top: -10%;">
				<div class="modal-content">
					<div class="col update_content_bg pwd_wrap">
						<view class="dialog_head row_center">
							<image src="../../static/img/dialog_close.png" mode="aspectFill" @click="closePwd"></image>
							<span class="title">请输入支付密码</span>
						</view>
						
						<span class="warning_info">提现</span>
						<view class="row money_wrap">
							<image src="../../static/img/qian_blank_icon.png" mode="aspectFill"></image>
							<span class="money">{{tixianMoney[0]}}</span>
							<span class="money_point">.{{tixianMoney[1]}}</span>
						</view>
						<view class="pwd_input_wrap" >
							<span :class="['item',{'item-active':codeLength==index}]" v-for="(item, index) in arr" :key="index" @click="showKeyboard">{{code.charAt(index)?"·":""}}</span>
						</view>
						<view class="forget_pwd" @click="forgetPwd">忘记密码?</view>
					</div>
				</div>
			</div>
		</div>
		
		<DigitalKeyboard @change="contToggle" @closeKeyboard="closeKeyboard" :keyBoardSwitch="keyBoardSwitch" :decimalPoint="false"></DigitalKeyboard>
		
		<div class="modal-mask row_center" v-if="isShowForgetPwd" @touchmove.stop.prevent="moveHandle">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="col update_content_bg forget_wrap">
						<image src="../../static/img/forget_dialog_close.png" mode="aspectFill" @click="closeError"></image>
						<view class="title">支付密码错误，请重试</view>
						<view class="retry_btn" @click="retryBtn">重新输入</view>
						<view class="forget_btn" @click="forgetPwd">忘记密码</view>
					</div>
				</div>
			</div>
		</div>
		
	</view>
</template>

<script>
	import { BASE_URL,addBank,apply,confirm } from '@/utils/api'
	import DigitalKeyboard from '@/components/digital-keyboard/digital-keyboard.vue'
	export default {
		components:{
			DigitalKeyboard		
		},
		data() {
			return {
				isShowFreeze: false,
				isShowPwd: false,
				isActive: true,
				arr:['','','','','',''],				
				code:'',				
				codeLength:null,				
				length:6,				
				keyBoardSwitch:false,
				isShowForgetPwd: false,
				money: '',
				tixianMoney: 0,
				bankParams:{},
				balanceMoney: 0,
				withdrawMethodId: 0,
				minLimit: 0,
				maxLimit: 0,
				desc: '',
				bankName: '',
				bankCardNo: '',
				bankIcon: ''
			}
		},
		methods: {
			retryBtn(){
				this.isShowForgetPwd = false;
				this.code = '';
				this.isShowPwd = true;
				this.keyBoardSwitch = true;
				this.tixianMoney = parseFloat(this.money).toFixed(2).split(".");
			},
			closeError(){
				this.isShowForgetPwd = false;
			},
			async confirm(){
				let params = {
					amount: this.money,
					withdrawMethodId: this.withdrawMethodId,
					payCode: this.code
				};
				console.log(this.code);
				let res = await confirm(params);
				if(res.code == 1){
					// uni.showToast({
					// 	icon: 'none',
					// 	duration:1000,
					// 	title:'提现成功'
					// });
					// setTimeout(()=>{
					// 	uni.navigateBack();
					// }, 1000);
					
					uni.navigateTo({
						url: '/pages/tixian_success/tixian_success?money='+this.money+"&bankName="+this.bankName+"&bankCardNo="+this.bankCardNo+"&fee="+res.data.fee
					})
				}else if(res.code == -11){
					this.isShowForgetPwd = true;
				}else{
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:res.message
					});
				}
			},
			async tixianAction(){
				if(!this.money){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请输入提现金额'
					});
					return;
				};
				
				if(!this.bankParams){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请选择银行卡'
					});
					return;
				}
				
				if(parseFloat(this.money) < parseFloat(this.minLimit)){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'输入金额不能小于'+this.minLimit
					});
					return;
				}
				
				if(parseFloat(this.money) > parseFloat(this.maxLimit)){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'输入金额不能大于'+this.maxLimit
					});
					return;
				}
				
				this.code = '';
				this.isShowPwd = true;
				this.keyBoardSwitch = true;
				this.tixianMoney = parseFloat(this.money).toFixed(2).split(".");
				
			},
			async apply(){
				let res = await apply();
				if(res.code == 1){
					this.minLimit = res.data.minLimit;
					this.maxLimit = res.data.maxLimit;
					this.desc = res.data.desc;
					this.balanceMoney = res.data.balance;
					this.withdrawMethodId = res.data.withdrawMethodId;
					if(this.withdrawMethodId && this.withdrawMethodId>0){
						this.bankName = res.data.bankName;
						this.bankCardNo = res.data.bankCardNo;
						this.bankIcon = res.data.bankIcon;
						this.$forceUpdate();
						console.log(this.withdrawMethodId);
					}else{
						this.withdrawMethodId = 0;
					}
					
				}
			},
			closePwd(){
				this.isShowPwd = false;
				this.keyBoardSwitch = false;
			},
			getAllMoney(){
				this.money = this.balanceMoney;
			},
			goToSelectBank(){
				uni.navigateTo({
					url:"/pages/select_bank/select_bank?withdrawMethodId="+this.withdrawMethodId
				})
			},
			forgetPwd(){
				uni.navigateTo({
					url:"/pages/verify/verify"
				})
			},
			inputChange(e){
				console.log(e.detail.value);
				this.money=e.detail.value.replace(/[^\d.]/g,'');
				console.log(this.money);
				if(parseFloat(this.money) > parseFloat(this.maxLimit)){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'提现金额不能大于'+this.maxLimit
					});
				}
				
			},
			goToAddBank(){
				uni.navigateTo({
					url:'/pages/add_bank/add_bank'
				})
			},
			moveHandle(e){},
			showKeyboard(){
				this.codeLength=this.code.length==6?5:this.code.length;				
				this.keyBoardSwitch=true;			
			},			
			hiddenKeyboard(){				
				this.keyBoardSwitch=false;				
				this.codeLength=null;			
			},			
			closeKeyboard(value){				
						
			},			
			contToggle(k){				
				let len=this.code.length;				
				if(k===''){					
					this.code=this.code.substring(0,len-1);					
					this.codeLength=this.code.length;					
					return;				
				}				
				this.codeLength=len+1;				
				this.code+=k.toString();	
				console.log(this.code);
				if(this.length===len+1){					
					this.keyBoardSwitch=false;	
					this.isShowPwd = false;
					this.confirm();
					return;				
				};
				
			}
			
		},
		onShow() {
			// let bankParams = uni.getStorageSync("bankParams");
			// if(bankParams){
			// 	this.bankParams = bankParams;
			// 	let length = this.bankParams.bankCardNo.length;
			// 	this.bankParams.bankCardNo = this.bankParams.bankCardNo.substring(length-4, length);
			// 	
			// 	this.bankName = bankParams.bankName;
			// 	this.bankCardNo = bankParams.bankCardNo;
			// 	this.bankIcon = bankParams.bankIcon;
			// 	this.withdrawMethodId = bankParams.id;
			// 	uni.removeStorageSync("bankParams");
			// }
			// console.log(bankParams);
			this.apply();
		},
		onLoad(opt) {
			// this.apply();
		}
	}
</script>

<style>
	page{background: #F6F6F6;}
.head_wrap{width: 100%; height: 155upx; padding: 0upx 26upx; box-sizing: border-box;border-bottom: 20upx solid #F1F1F1;background: #FFFFFF;}
.head_wrap image{width: 60upx; height: 60upx;margin-right: 22upx;}
.head_wrap .bank_wrap{display: flex;flex-direction: column;}
.head_wrap .name{color: #333333;font-size: 32upx; font-weight: bold; line-height: 1.0; margin-bottom: 19upx;}
.head_wrap .bank_num{color: #666666;font-size: 26upx; font-weight: normal; line-height: 1.0;}
.head_wrap .add_bank{color: #4A65F7;font-size: 32upx; font-weight: bold;}

.content_wrap{padding: 39upx 0upx 0upx 27upx; background: #FFFFFF;}
.content_wrap .title{font-size: 26upx; color: #666666; font-weight: bold;}
.content_money{padding-bottom: 0upx;margin-top: 27upx;border-bottom: solid 2upx #E6E6E6; height: 120upx; line-height: 120upx;}
.content_money image{width: 22upx; height: 30upx;margin-right: 23upx;}
.content_money input{font-size: 72upx; color: #333333; height: 120upx; line-height: 120upx;}

.info_wrap .info{color: #999999; font-size: 26upx; line-height: 1.0;}
.info_wrap .btn{color: #4A65F7; font-size: 26upx; font-weight: bold;}
.info_wrap{padding: 27upx 30upx 27upx 0upx;}

.tixian_btn{margin: 60upx 27upx; height: 94upx; line-height: 94upx; background: #FFCA0A; border-radius: 12upx;}
.tixian_btn span{color: #FFFFFF; font-size: 36upx; text-align: center;background: #CCCCCC;border-radius: 12upx; font-weight: bold;}
.tixian_btn .active{color: #333333; background: #FFCA0A;}

.bottom{padding-left: 33upx;}
.bottom_info{color: #333333; font-size: 26upx; font-weight: bold;}
.bottom_one{color: #666666; font-size: 26upx;}
.bottom_one .one{border-radius: 50%; background: #999999;width: 30upx; color: #F5F5F5; font-size: 24upx;
height: 30upx;margin-right: 20upx;color: #FFFFFF; line-height: 30upx;text-align: center;}


.free_wrap image{width: 60upx; height: 60upx; margin-top: 40upx; margin-bottom: 30upx;}
.free_wrap .warning_info{color: #333333; font-size: 32upx;}
.free_wrap .kefu{color: #999999; font-size: 26upx; margin-top: 10upx; margin-bottom: 40upx;}
.free_wrap .btn{color: #FFCA0A; font-size: 32upx; height: 100upx; line-height: 100upx; text-align: center;border-top: solid #E6E6E6 2upx;width: 100%; box-sizing: border-box;}

.pwd_wrap .dialog_head{padding-top: 39upx;width: 100%;padding-left: 17upx;margin-bottom: 60upx; position: relative;}
.pwd_wrap .dialog_head image{width: 48upx; height: 48upx; left: 30upx; position: absolute; top: 30upx;}
.pwd_wrap .dialog_head .title{color: #333333;font-size: 32upx; font-weight: bold; line-height: 1.0;}
.pwd_wrap .warning_info{color: #666565;font-size: 32upx; line-height: 1;}
.pwd_wrap .money_wrap {line-height: 1.0; margin-top: 28upx; margin-bottom: 60upx;}
.pwd_wrap .money_wrap image{width: 22upx; height: 30upx; margin-right: 20upx; margin-top: 24upx;}
.pwd_wrap .money_wrap .money{color: #333333; font-size: 72upx; font-weight: bold; line-height: 1.0;}
.pwd_wrap .money_wrap .money_point{color: #333333; font-size: 48upx; margin-top: 15upx;font-weight: bold;}
.pwd_wrap .pwd_input_wrap{text-align: center; border-top: #EDEDED 2upx solid;border-bottom: #EDEDED 2upx solid; border-left: #EDEDED 2upx solid;height: 80upx;}
.pwd_wrap .pwd_input_wrap span{text-align: center; border-right: #EDEDED 1upx solid; width: 80upx; height: 80upx; display: inline-block; line-height: 80upx; font-size: 100upx;}
.pwd_wrap .forget_pwd{text-align: right; width: 100%; padding: 20upx 0upx 41upx 0upx;color: #A2B0FF; font-size: 26upx; font-weight: bold; line-height: 1.0; margin-right: 68upx;}
.modal-dialog{width: 75%!important; border-radius: 10upx;}


.forget_wrap{}
.forget_wrap image{width: 48upx; height: 48upx; position: absolute; top: 13upx; right: 13upx;}
.forget_wrap .title{color: #333333; font-size: 32upx; font-weight: bold; margin: 58upx 0upx;}
.forget_wrap .retry_btn{width: 280upx; text-align: center; height: 74upx; line-height: 74upx; background: #FFCA0A; font-size: 32upx; color: #333333;border-radius: 12upx;margin-bottom: 27upx;}
.forget_wrap .forget_btn{ font-size: 32upx; color: #999999;margin-bottom: 58upx;}
</style>
